<template lang="html">
    <el-dialog append-to-body :title="dialogObject.title" width="350px" :visible.sync="dialogObject.formVisible">
    
    <div>
    <el-scrollbar style="height:350px;">
        <el-tree style="min-width:120px;"
                :data="treeData"
                :props="treeObj.treeProps"
                :expand-on-click-node="true"
                :check-on-click-node="true"
                node-key="idKey"
                :default-expand-all="true"
                show-checkbox
                check-strictly
                :default-checked-keys="checkedKeys"
                @check="treeCheck"
                :lazy="false">
        </el-tree>
    </el-scrollbar>
    <div style="text-align:right;padding-top:10px;" slot="footer" class="dialog-footer">
            <el-button @click="dialogObject.formVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </div>

</el-dialog>
</template>
<script>
export default {
    data() {
        return {
            treeData:[],
            checkedKeys:[],
            roleId:'',
            treeObj: {
                treeUrl:'/java/sys/menu/list',
                treeProps:{label:'name',isLeaf: true,children:'children'},
                defaultExpandAll:false,
                lazy:true,
                title:'菜单树'
            },
            dialogObject:{formVisible:false,title:'选择'},
        };
    },
    created() {
        var _this = this;

    },
    mounted() {
        var _this = this;
    },
    methods: {
        treeCheck(data, treeNode) {
            var _this = this;
            _this.checkedKeys = treeNode.checkedKeys;
            console.log(data, status, _this.checkedKeys);
            
        },
        show(id) {
            var _this = this;
            _this.roleId = id;
            _this.myUtils.appRequest({
                url: '/java/sys/role/getJurisdictionTree',
                method:'post',
                data:{id:id},
                callback:function(data) {
                    _this.dialogObject.formVisible=true;
                    var selectIds = [];
                    for(var i=0;i<data.content.menus.length;i++) {
                        var menuItem = data.content.menus[i];
                        if(menuItem.checked) {
                            selectIds[selectIds.length] = menuItem.idKey;
                        }
                        for(var j=0;j<menuItem.children.length;j++) {
                            var menuItem1 = menuItem.children[j];
                            if(menuItem1.checked) {
                                selectIds[selectIds.length] = menuItem1.idKey;
                            }
                            if(menuItem1.children != null) {
                                for(var j3=0;j3<menuItem1.children.length;j3++) {
                                    var menuItem3 = menuItem1.children[j3];
                                    if(menuItem3.checked) {
                                        selectIds[selectIds.length] = menuItem3.idKey;
                                    }
                                }
                            }
                            
                        }
                    }
                    _this.treeData = data.content.menus;
                    _this.checkedKeys = selectIds;
                },
                catch: function(res) {
                    console.log(res);
                }
            }, _this);
            
        },
        onSubmit() {
            var _this = this;
            if(_this.checkedKeys == null || _this.checkedKeys.length <=0) {
                this.$message.error('请选择记录');
                return;
            }
            
            _this.myUtils.appRequest({
                url: '/java/sys/role/saveJurisdiction',
                method:'post',
                data:{roleId:_this.roleId, selectIds:_this.checkedKeys},
                callback:function(data) {
                    _this.$message({
                        showClose: true,
                        message: data.message,
                        type: 'success'
                    });
                    _this.dialogObject.formVisible=false;
                    
                },
                catch: function(res) {
                    console.log(res);
                }
            }, _this);
        }
        
    }
};
</script>
<style>
.el-form-item__label {
  width:100px;
}
.el-dialog__body{
    padding:10px;
}
</style>
